<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/common.css" media="all">
    <script src="../../js/layui/layui.all.js"></script>
    <script src="../../js/token.js"></script>
    <script src="../../js/config.js"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div style="text-align: center;">
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="test-table-demoReload" placeholder="输入角色名称" autocomplete="off">
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layuiadmin-btn-admin search" lay-submit lay-filter="LAY-user-back-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-card-body">
            <button class="layui-btn layui-btn-sm layui-icon layui-icon-add-circle" id="add">新增角色</button>
            <table class="layui-hide" id="t" lay-filter="t"></table>
        </div>
    </div>
</div>

</body>
<script type="text/html" id="tb">
    <div class="layui-container">
        <span class="">角色管理</span>
    </div>
</script>

<script type="text/html" id="caozuo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">权限编辑</a>
</script>

<script>

    var $ = layui.$
    var table = layui.table
    var table_obj = table.render({
        elem: '#t',
        id: 'tt',
        toolbar: '#tb',
        url: HOST+'admin/role/findRoleWithPage',
        /*parseData: function(res){ //res 即为原始返回的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.records //解析数据列表
            };
        },*/

        cols: [
            [{
                field: 'roleId',
                title: '序号',
                width: '20%',
                type:'numbers',
                align: 'center'
            },
                {
                    field: 'roleName',
                    title: '角色名称',
                    width: '60%',
                    align: 'center'
                    ,edit: 'text'
                },
                {
                    title: '操作',
                    width: '20%',
                    align: 'center',
                    toolbar: '#caozuo',
                    fixed: 'right'
                }
            ]
        ],
        page: true,
        limit:40,
    })

    //监听单元格编辑
    table.on('edit(t)', function(obj){
        var value = obj.value //得到修改后的值
            ,data = obj.data //得到所在行所有键值
            ,field = obj.field; //得到字段
        $.ajax({
            type:"post",
            url:HOST+"admin/role/updateRoleName",
            dataType:"json",
            data:{
                roleId : data.roleId,
                roleName : data.roleName
            },
            success : function (res) {
                if(res.code==0){
                    layer.msg("修改成功");
                }else if(res.code==1){
                    layer.msg("修改失败");
                }else{
                    layer.msg(res.data);
                }
                table.reload('tt');
            }
        });
        // console.log("role.id："+data.roleId+" role.name："+data.roleName+" field："+field);
        // layer.msg('[ID: '+ data.roleId +'] ' + field + ' 字段更改为：'+ value);
    });

    //监听工具条
    table.on('tool(t)', function (obj) {
        var data = obj.data
        if (obj.event === 'detail') {
            layer.open({
                type: 2,
                area:["100%", "100%"],
                content: 'roleTree.html?roleId='+data.roleId //这里content是一个普通的String
            });
        }
    })
    $("#add").on("click",function () {
        layer.open({
            type: 2,
            area:["100%", "100%"],
            content: 'InsertroleTree.html' //这里content是一个普通的String
        });
    })

    $('.test-table-operate-btn .layui-btn').on('click', function () {
        var type = $(this).data('type')
        active[type] ? active[type].call(this) : ''
    })
    $('.search').on('click',function () {
        var text = $('#test-table-demoReload').val();
        table.reload('tt',{
            url:HOST+'admin/role/findRoleWithPage',
            where:{
                roleName:text
            },
            page:{
                curr:1
            }
        })
    })
</script>
</html>
